<template>
	<view class="address-book-container">


		<!-- 搜索框 -->
		<view class="search-container">
			<uv-search v-model="keyword" :showAction="false" placeholder="input" shape="round"></uv-search>
			<!-- <view class="search-box">
					<image class="search-icon" src="/static/uniapp/search.png" mode=""></image>
				<input type="text" class="search-input" placeholder="input" v-model="searchText" />
			</view> -->
		</view>
		<!-- 联系人列表 -->
		<uv-index-list class="contact-lists" :index-list="[]" customNavHeight="100rpx">
			<view class="contact-list-item">
				<template v-for="(item, index) in itemArr">
				<uv-index-item>
					<!-- #ifndef APP-NVUE -->
					<view class="group-header">
						<text>Project Team {{ item.group }}</text>
					</view>
					<!-- #endif -->
					<view class="contact-item" v-show="showKewList(contact, keyword)" v-for="(contact, index) in item.users" :key="'team1-'+index" @click="handleItemClick(contact)">
						<image class="contact-avatar" :src="contact.avatar" mode="aspectFill"></image>
						<view class="contact-info">
							<text class="contact-name">{{ contact.nickname }}</text>
							<text class="contact-phone">{{ contact.phone }}</text>
						</view>
						<view class="call-icon" @click.stop="callContact(contact)">
							<image src="/static/uniapp/phone.png" mode=""></image>
						</view>
					</view>
					<!-- <view class="list-cell" v-for="(cell, index) in item">
						item
					</view> -->
				</uv-index-item>
			</template>
			</view>
		</uv-index-list>
	</view>
</template>

<script>
import { getaddressBook, getMyCompanyList } from '@/api/approval'
import { useCounterStore } from '@/store/counter'
import { mapActions } from 'pinia'
export default {
	data() {
		return {
			searchText: '',
			currentLetter: 'A',
			keyword:'',
			itemArr: [],
		}
	},
	computed: {
		filteredContacts() {
			if (!this.searchText) {
				return [...this.teamOneContacts, ...this.teamTwoContacts];
			}

			const searchLower = this.searchText.toLowerCase();
			const filter = contact =>
				contact.name.toLowerCase().includes(searchLower) ||
				contact.phone.includes(this.searchText);

			return [
				...this.teamOneContacts.filter(filter),
				...this.teamTwoContacts.filter(filter)
			];
		}
	},
	onLoad() {
		this.getlist()
  },
	methods: {
	    ...mapActions(useCounterStore, ['setItem']),
		async getlist(){
			let companyList = await getMyCompanyList() || []
				console.log('getaddressBook', companyList)
				getaddressBook(companyList[0].id).then(res => {
				console.log('getaddressBook', res)
				this.itemArr = res
			})
		},
		showKewList(item, keyword){
			if(!keyword) return true
			return item.nickname.toLowerCase().includes(keyword.toLowerCase()) || item.phone.includes(keyword)
		},
		onScroll(e) {
			// 实际应用中，这里需要根据滚动位置更新当前字母
			// 这需要计算每个字母分区的位置
		},

		scrollToLetter(letter) {
			this.currentLetter = letter;
			// 实际应用中，这里应该滚动到对应字母的位置
			uni.showToast({
				title: `跳转到字母 ${letter}`,
				icon: 'none'
			});
		},
		handleItemClick(contact) {
			this.setItem(contact)
			uni.navigateTo({
				url: `/pages/Contacts/detail?id=${contact.id}`
			});
		},
		callContact(contact) {
			// event.stopPropagation()
			// uni.navigateTo({
			// 	url: `/pages/Contacts/detail?name=${contact.name}&phone=${contact.phone}`
			// });
			uni.showModal({
				title: '拨打电话',
				content: `确定要拨打 ${contact.nickname} 的电话 ${contact.phone} 吗？`,
				success: (res) => {
					if (res.confirm) {
						// 实际应用中，这里应该调用拨打电话的API
						uni.makePhoneCall({
							phoneNumber: contact.phone.replace(/\s/g, ''),
							fail: () => {
								uni.showToast({
									title: '拨打电话失败',
									icon: 'none'
								});
							}
						});
					}
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #f5f5f5;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.address-book-container {
	display: flex;
	flex-direction: column;
	position: relative;
	height: calc(100vh - 220rpx);
	/* 为底部导航留出空间 */
}


/* 搜索框 */
.search-container {
	padding: 0 30rpx 20rpx;
	background: #fff;
}
.contact-lists{
	padding: 15px;
	//margin-right: 10px;
	&::-webkit-scrollbar {
		display: none; /* Chrome, Safari */
	}
	.contact-list-item{
		background-color: #EAECF0;
		border-radius:15px;
		border-bottom: 1px solid #EAECF0;
	}
}
.search-box {
	display: flex;
	align-items: center;
	height: 80rpx;
	border-radius: 40rpx;
	background-color: #F9FAFB;
	padding: 0 30rpx;
}

.search-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 20rpx;
	opacity: 0.6;
}

.search-input {
	flex: 1;
	height: 80rpx;
	font-size: 30rpx;
	color: #333;
}

/* 联系人列表 */
.contact-list {
	flex: 1;
	height: calc(100vh - 290rpx);
	width: 86%;
	margin-left: 30rpx;
	margin-right: 30rpx;

}

.group-header {
	padding: 12rpx 24rpx;
	font-weight: 400;
	font-size: 15px;
	color: #475467;
	line-height: 23px;
	text-align: left;
}

.group-header-2 {
	position: relative;
	margin-top: 10rpx;
}

.group-marker {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 8rpx;
	height: 40rpx;
	background-color: #19B36E;
	border-radius: 0 4rpx 4rpx 0;
}

.contact-item {
	display: flex;
	align-items: center;
	padding: 28rpx 30rpx;
	background-color: #fff;
	border-bottom: 1px solid #f0f0f0;
}

.contact-avatar {
	width: 96rpx;
	height: 96rpx;
	border-radius: 50%;
	margin-right: 24rpx;
}

.contact-info {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.contact-name {
	font-size: 15px;
	color: #101828;
	line-height: 23px;
	text-align: left;
	margin-bottom: 10rpx;
}

.contact-phone {
	font-size: 12px;
	color: #667085;
	line-height: 15px;
	text-align: left;
}

.call-icon {
	width: 38rpx;
	height: 38rpx;
}

.call-icon image {
	width: 38rpx;
	height: 38rpx;
}

/* 字母索引导航 */
.alphabet-nav {
	position: fixed;
	right: 10rpx;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	background-color: transparent;
	z-index: 100;
	background-color: #fff;
}

.letter-item {
	width: 40rpx;
	height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	color: #D0D5DD;
}

.letter-item.active {
	color: #19B36E;
	font-weight: 600;
}
</style>
